<template>
  <el-dialog v-model="inDialog.show" title="添加用户">
    <AppSearchForm size="small" @submit="userSearch()" @reset="userReset()">
      <el-form-item>
        <el-input v-model="query.name" clearable placeholder="请输入用户名称" />
      </el-form-item>
    </AppSearchForm>
    <AppPageTable
      stripe
      ref="dialogTable"
      size="small"
      :data="table.data"
      :autostyle="'height:100%'"
      :option="table.option"
      @select="changeUserList($event)"
      @change="getUserList()"
    >
      <el-table-column type="selection" width="50px" />
      <el-table-column show-overflow-tooltip prop="username" label="账号" />
      <el-table-column show-overflow-tooltip prop="nickName" label="昵称" />
      <el-table-column show-overflow-tooltip prop="phone" label="手机号" />
      <el-table-column show-overflow-tooltip prop="sex" label="性别">
        <template #default="scope">
          {{ scope.row.sex ? "女" : "男" }}
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="所属公司">
        <template #default="scope">
          {{ scope.row.company.name }}
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="所属部门">
        <template #default="scope">
          {{ scope.row.dept.name }}
        </template>
      </el-table-column>
    </AppPageTable>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelDialog" link>取消</el-button>
        <el-button
          type="primary"
          @click="submitDialog"
          :loading="dialog.btnLoading"
        >
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent } from "vue";
import AppSearchForm from "@/components/AppSearchForm.vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
export default defineComponent({
  components: { AppSearchForm, AppPageTable },
  props: {
    roleId: {
      type: [Number, String],
    },
    userList: {
      type: Array,
      default: () => [],
    },
    dialog: {
      type: Object,
      default: () => {},
    },
  },
  emits: ["update:userList", "update:dialog", "toChangeUserList"],
  computed: {
    inUserList: {
      get() {
        return this.userList;
      },
      set(value) {
        this.$emit("update:userList");
      },
    },
    inDialog: {
      get() {
        return this.dialog;
      },
      set(value) {
        this.$emit("update:dialog");
      },
    },
  },
  data() {
    return {
      query: {
        name: "",
      },
      table: {
        data: [],
        option: useTableOption(),
      },
    };
  },
  methods: {
    getUserList() {
      this.table.option.loading = true;
      this.$http
        .get("/api/user/query", {
          KeyWords: this.query.name,
          PageIndex: this.table.option.page,
          PageSize: this.table.option.pageSize,
        })
        .then((res) => {
          this.table.data = res.content;
          this.$nextTick(() => {
            this.inUserList.forEach((item) => {
              let sameIndex = this.table.data.findIndex((t) => {
                return t.id == item.id;
              });
              if (sameIndex != -1) {
                this.$refs.dialogTable.$refs.tableRef.toggleRowSelection(
                  this.table.data[sameIndex],
                  true
                );
              }
            });
          });
          this.table.option.total = res.totalElements;
        })
        .finally(() => (this.table.option.loading = false));
    },
    userSearch() {
      this.table.option.page = 1;
      this.getUserList();
    },
    userReset() {
      this.table.option.page = 1;
      this.query.name = "";
      this.getUserList();
    },
    submitDialog() {
      this.inDialog.btnLoading = true;
      this.$http
        .post("/api/userRole/addUserRole", {
          roleId: this.roleId,
          userIdList: this.table.option.selected.map((t) => {
            return t.id;
          }),
        })
        .then((res) => {
          if (res.status) {
            this.$message.success(res.message);
            this.$emit("toChangeUserList");
            this.getUserList();
            this.inDialog.show = false;
            this.$emit("ok");
          } else {
            this.$message.error(res.message);
            this.$emit("ok");
          }
        })
        .finally(() => (this.inDialog.btnLoading = false));
    },
    cancelDialog() {
      this.inDialog.show = false;
    },
    changeUserList({ selection, row }) {
      this.inUserList.findIndex((t) => {
        return t.id == row.id;
      });
      // if(changeIndex!=-1){
      //     this.inUserList.splice(changeIndex,1)
      // }else{
      //     this.inUserList.push(row)
      // }
    },
  },
  watch: {
    "inDialog.show"(newVal) {
      if (newVal) {
        this.getUserList();
      }
    },
  },
  mounted() {},
});
</script>

<style lang="scss" scoped></style>
